<template>
  <div class="account_container">
    <el-dropdown @command="handleCommand">
      <span class="account_container-user">
        <el-avatar :size="30" :src="Account" />
        <span>管理员</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="个人中心">个人中心</el-dropdown-item>
          <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
  import Account from 'assets/images/account.jpg';

  const handleCommand = command => {
    console.log(command);
  };
</script>

<style scoped lang="scss">
  @import 'assets/style/common.scss';
  .account_container {
    :hover {
      cursor: pointer;
    }
    &-user {
      @include flex-center;

      span {
        margin-left: 0.3125rem;
      }
    }
  }
</style>
